import React, { useState, useEffect } from 'react'
import { Col, Form, Input, Button, Table, Card, DatePicker, Select, Modal, Row, message, } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import RenderButtom from '@/components/RenderButton'
import SearchBox from '@/components/SearchBox'
import GapBlock from '@/components/GapBlock'
import {
  commissionManageList,
  rechargeOrder,
} from '@/services/distribution/commissionPlace'
import QRCode from 'qrcode.react'
import moment from 'moment'

const { Option } = Select
const { RangePicker } = DatePicker;
const hasSearchBtn = JSON.parse(localStorage.getItem('hasSearchBtn'))
const columns = [
  {
    title: '序号',
    dataIndex: 'sort',
    key: 'sort',
    render: (t) => <>{t + 1}</>
  },
  {
    title: '充值账号',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '金额',
    dataIndex: 'card',
    key: 'card',
  },
  {
    title: '交易时间',
    dataIndex: 'phone',
    key: 'phone',
  },
  {
    title: '交易类型',
    dataIndex: 'money',
    key: 'money',
  },
  {
    title: '订单号',
    dataIndex: 'createTime',
    key: 'createTime',
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
  },
];
const statusList = [
  {
    label: "操作中",
    value: 0
  },
  {
    label: "操作成功",
    value: 1
  },
  {
    label: "操作失败",
    value: 2
  }
]
const typeList = [
  {
    label: "充值",
    value: 0
  },
  {
    label: "红包",
    value: 1
  }
]
const moneyLists = [1, 500, 1000, 2000, 3000, 5000]
const CashManage = props => {
  const { form } = props
  const { getFieldDecorator } = form
  const [data, setData] = useState([])
  const [visible, setVisible] = useState(false)
  const [isPay, setIsPay] = useState(false)
  const [rechargeAmount, setMoney] = useState('')
  const [payType, setPayType] = useState(null)
  const [QR, setQR] = useState('')

  useEffect(() => {
    init()
  }, [])

  const init = async params => {
    const res = await commissionManageList(params)
    setData(res.data)
  }

  // 表单查询
  const handleSearch = e => {
    e.preventDefault()
    form.validateFields((err, values) => {
      console.log('Received values of form: ', values)
      init({
        ...values,
        startTime: values.time && moment(values.time[0]).format('YYYY-MM-DD'),
        endTime: values.time && moment(values.time[1]).format('YYYY-MM-DD'),
      })
    })
  }
  // 表单清空
  const handleReset = e => {
    form.resetFields();
    init()
  }
  // 查询条件
  const getFields = () => {
    return(
      <>
        <Col span={6}>
          <Form.Item label={`操作类型`}>
            {getFieldDecorator(`operationType`, {})
              (
                <Select>
                {
                  typeList.map(
                    e => <Option key={e.value}>{e.label}</Option>
                  )
                }
              </Select>)}
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item label={`操作状态`}>
            {getFieldDecorator(`operationStatus`, {})
              (
                <Select>
                  {
                    statusList.map(
                      e => <Option key={e.value}>{e.label}</Option>
                    )
                  }
                </Select>
              )}
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item label={`申请日期`}>
            {getFieldDecorator(`time`, {})
              (<RangePicker />)}
          </Form.Item>
        </Col>
      </>
    )
  }
  // 按钮处理
  const handleBtn = type => {
    
  }

  const handleRecharge = () => {
    rechargeOrder({
      rechargeAmount: rechargeAmount,
      payType: payType
    }).then(res => {
      if (res.code == 0) {
        setQR(res.data)
        setIsPay(!isPay)
      } else {
        message.info(res.msg)
      }
      setVisible(!visible)
    })
  }

  return (
    <PageHeaderWrapper>
      <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} />
      <RenderButtom click={handleBtn} />
      <Card>
        <div>当前账号分销代付金余额：</div>
        <Button style={{marginTop: 10}} onClick={() => setVisible(!visible)}>充值</Button>
      </Card>
      <GapBlock />
      <Table 
        columns={columns}
        dataSource={data}
      />
      <Modal
        visible={visible}
        title="充值"
        okText="充值"
        cancelText="取消"
        onCancel={() => setVisible(!visible)}
        onOk={handleRecharge}
      >
        <Row>
          <Col span={22}><Input value={rechargeAmount} placeholder="充值金额" onChange={e => setMoney(e.target.value)} /></Col>
          <Col span={1} style={{marginLeft: 5}}>元</Col>
        </Row>
        <GapBlock />
        <Row style={{textAlign: 'center'}}>
          {
            moneyLists.map(m => (
              <Col span={8} key={m} style={{marginTop: 10}}>
                <Button 
                  type={rechargeAmount == m ? 'primary' : null} 
                  style={{width: 70}}
                  onClick={() => setMoney(m)}
                >
                  {m}元
                </Button>
              </Col>
            ))
          }       
        </Row>
        <Row style={{marginTop: 20}}>
          <Col span={23}>
            <Select style={{width: '100%'}} placeholder='请选择充值方式' onChange={val => setPayType(val)}>
              <Option value='-WXP'>微信</Option>
              <Option value='-ALP'>支付宝</Option>
            </Select>
          </Col>
        </Row>
      </Modal>
      <Modal 
        visible={isPay}
        footer={null}
        onCancel={() => setIsPay(!isPay)}
      >
        <Row style={{textAlign: 'center'}}>
          <div>用{payType == '-ALP' ? '支付宝' : '微信'}扫一扫支付</div>
          <div style={{ color: '#f00'}}><b>￥{rechargeAmount}</b></div>
          <QRCode style={{margin: '10px auto'}} value={QR} />,
        </Row>
      </Modal>
    </PageHeaderWrapper>
    )
}

export default Form.create()(CashManage)
